<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8" />
    <title>控制后台</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
    <link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
    <link rel="stylesheet" href="/app/admin/admin/css/pages/dashboard.css" />
  </head>
  <body class="pear-container">
    <div>
      <!-- 推广线下链接 -->
      <div class="layui-row">
        <div class="layui-col-md12">
          <div class="layui-card">
            <div class="layui-card-header">推广线下链接</div>
            <div class="layui-card-body promotion-link flex align-center">
              <div class="layui-row layui-col-space10 w-full hidden">
                <div class="layui-col-xs12 layui-col-md8 setlink-box">
                  <button
                    class="pear-btn pear-btn-fluid pear-btn-left pear-btn-sm"
                    id="setlink"
                  ></button>
                </div>

                <div class="layui-col-xs12 layui-col-md4">
                  <button
                    plain
                    class="pear-btn pear-btn-primary pear-btn-sm"
                    id="see-price"
                  >
                    <i class="pear-icon pear-icon-browse"></i>查看价格
                  </button>
                  <button
                    class="pear-btn pear-btn-primary pear-btn-sm"
                    id="copy-url"
                  >
                    <i class="pear-icon pear-icon-copy"></i>复制网址
                  </button>
                  <button plain class="pear-btn pear-btn-sm" id="custom-price">
                    <i class="pear-icon pear-icon-edit"></i>自定义链接
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 用户信息 -->
      <div class="layui-row layui-col-space10">
        <div class="layui-col-xs12 layui-col-md2">
          <!-- 会员基础信息 -->
          <div class="layui-card">
            <div
              class="layui-card-body card1 flex align-center"
              id="memberinfo"
            >
              <div class="logo"></div>
              <div class="user-info">
                <a href="javascript:void(0);">会员账号</a>
                <h3></h3>
                <span>加入时间:</span>
                <span></span>
              </div>
            </div>
          </div>
        </div>

        <!--  TEMPORARY: 暂无数据、临时隐藏 -->
        <!-- style="display: none" -->
        <div class="layui-col-xs12 layui-col-md10">
          <div class="layui-row layui-col-space10">
            <div class="layui-col-md3">
              <div class="layui-card">
                <div class="layui-card-body card2">
                  <div>
                    <img src="" alt="" class="before-icons"/> <span>我的余额</span>
                  </div>
                  <h3 id="card2-value"></h3>
                  <div class="bgc">
                    <img
                      src=""
                      alt=""
                      style="opacity: 0.1"
                    />
                  </div>
                </div>
              </div>
            </div>

            <div class="layui-col-md3">
              <div class="layui-card">
                <div class="layui-card-body card3">
                  <div>
                    <img
                      src=""
                      alt=""
                      class="before-icons"
                    /> <span>我的佣金</span>
                  </div>
                  <h3 id="card3-value"></h3>
                  <div class="bgc">
                    <img
                      src=""
                      alt=""
                      style="opacity: 0.8"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="layui-col-md3">
              <div class="layui-card">
                <div class="layui-card-body card2">
                  <div>
                    <img
                            src=""
                            alt=""
                            class="before-icons"
                    /> 注册人数
                  </div>
                  <h3 id="card4-value"></h3>
                  <div class="bgc">
                    <img
                            src=""
                            alt=""
                            style="opacity: 0.8"
                    />
                  </div>
                </div>
              </div>
            </div>

            <div class="layui-col-md3">
              <div class="layui-card">
                <div class="layui-card-body card3">
                  <div>
                    <img src="" alt="" class="before-icons"/> <span>总充值金额</span>
                  </div>
                  <h3 id="card5-value"></h3>
                  <div class="bgc">
                    <img
                            src=""
                            alt=""
                            style="opacity: 0.1"
                    />
                  </div>
                </div>
              </div>
            </div>

            <!-- <div class="layui-col-md3">
              <div class="layui-card">
                <div class="layui-card-body card2">
                  <div>
                    <img
                      src=""
                      alt=""
                      class="before-icons"
                    />
                    当月充值人数
                  </div>
                  <h3>0</h3>
                  <div>
                    <i class="pear-icon pear-icon-direction-up"></i
                    >比较昨日增长0%
                  </div>
                  <div class="bgc">
                    <img
                      src=""
                      alt=""
                    />
                  </div>
                </div>
              </div>
            </div> -->
            <!-- <div class="layui-col-md3">
              <div class="layui-card">
                <div class="layui-card-body card3">
                  <div>
                    <img
                      src=""
                      alt=""
                      class="before-icons"
                    />
                    本月充值
                  </div>
                  <h3>0</h3>
                  <div>
                    <i class="pear-icon pear-icon-direction-up"></i
                    >比较上月增长0%
                  </div>
                  <div class="bgc">
                    <img
                      src=""
                      alt=""
                    />
                  </div>
                </div>
              </div>
            </div> -->
            <!-- <div class="layui-col-md3">
              <div class="layui-card">
                <div class="layui-card-body card4">
                  <div class="flex align-center justify-between">
                    <div>
                      <img
                        src=""
                        alt=""
                        class="before-icons"
                      />
                      本月发展客户
                    </div>
                    <div>
                      旗下客户总数：<span class="total-customers">0</span>
                    </div>
                  </div>
                  <h3>0</h3>
                  <div>
                    <i class="pear-icon pear-icon-direction-up"></i
                    >比较上月增长0%
                  </div>

                  <div class="bgc">
                    <img
                      src=""
                      alt=""
                    />
                  </div>
                </div>
              </div>
            </div> -->
            <!-- <div class="layui-col-md3">
              <div class="layui-card">
                <div class="layui-card-body card5">
                  <div>
                    <img
                      src=""
                      alt=""
                      class="before-icons"
                    />
                    当日返佣
                  </div>
                  <h3>0</h3>
                  <div>
                    <i class="pear-icon pear-icon-direction-up"></i
                    >比较昨日增长0%
                  </div>

                  <div class="bgc">
                    <img
                      src=""
                      alt=""
                    />
                  </div>
                </div>
              </div>
            </div> -->





          </div>
        </div>
      </div>

      <!-- 服务器套餐节点展示数据 -->
      <div class="layui-row layui-col-space10 product-wrapper">
        <!-- Dynamic insertion -->
      </div>

      <!-- 联系方式 -->
      <div class="layui-row layui-col-space10 manager-container">
        <div class="layui-col-md6">
          <div class="layui-card">
            <div class="layui-card-header">上级联系方式</div>
            <div class="layui-card-body" style="height: 220px">
              <div class="manager-wrapper flex align-center gap-x">
                <div class="manager-pic"></div>
                <div class="manager-infos">
                  <div class="manager-infos__name">
                    <strong></strong>
                  </div>
                  <div class="manager-infos__contact">
                    服务时间： 周一至周五9：00-18：00
                  </div>
                </div>
              </div>
              <div class="flex align-center manager-number-box">
                <div>
                  <span>
                    <img
                      class="before-icons"
                      src=""
                      alt=""
                    />
                  </span>
                  <span class="manager-qq-number"></span>
                  <i
                    class="pear-icon pear-icon-copy manager-qq-number-icon"
                  ></i>
                </div>
                <div>
                  <span>
                    <img
                      class="before-icons"
                      src=""
                      alt=""
                    />
                  </span>
                  <span class="manager-wx-number"></span>
                  <i
                    class="pear-icon pear-icon-copy manager-wx-number-icon"
                  ></i>
                </div>
              </div>
              <div class="flex align-center justify-between my-contact">
                <strong>我的联系方式</strong>
                <button
                  plain
                  id="edit-contact"
                  class="pear-btn pear-btn-primary pear-btn-sm"
                >
                  <i class="pear-icon pear-icon-edit"></i>编辑
                </button>
              </div>
              <div
                class="flex align-center manager-number-box my-contact-number"
              >
                <div>
                  <span>
                    <img
                      class="before-icons"
                      src=""
                      alt=""
                    />
                  </span>
                  <span class="my-qq-number"></span>
                  <i class="pear-icon pear-icon-copy my-qq-number-icon"></i>
                </div>
                <div>
                  <span>
                    <img
                      class="before-icons"
                      src=""
                      alt=""
                    />
                  </span>
                  <span class="my-wx-number"></span>
                  <i class="pear-icon pear-icon-copy my-wx-number-icon"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="layui-col-md6">
          <div class="layui-card">
            <div class="layui-card-header flex align-center justify-between">
              <span>最新公告</span>
            </div>
            <div class="layui-card-body overflow-hidden" style="height: 220px">
              <div class="notice-scroll">
                <ul class="notice-list">
                  <li>
                    <div class="notice__title">7-22日-新增腾讯云BGP线150条</div>
                    <div class="notice__time flex align-center">
                      <i class="pear-icon pear-icon-time"></i
                      ><span>2025-06-22 15:13:16</span>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 我的价格 -->
    <div class="my-price" style="display: none">
      <table id="my-price-tables" lay-filter="my-price-tables"></table>
    </div>

    <!-- 推广链接 -->
    <div class="my-promotion-link" style="display: none">
      <p class="my-promotion-link__tips">
        单独设置推广链接的权限和价格、设置完成后，推广链接的用户注册后默认按设置好的价格和权限，无需再手动对用户进行调整
      </p>
      <div class="my-promotion-link__operation">
        <button class="pear-btn pear-btn-primary">
          <i class="pear-icon pear-icon-add"></i>新增
        </button>
      </div>
      <table
        id="promotion-link-tables"
        lay-filter="promotion-link-tables"
      ></table>
    </div>

    <!-- 推广链接-操作项 -->
    <script type="text/html" id="toolEvent">
      <a lay-event="copy" class="mr-1"
        ><i class="pear-icon pear-icon-copy"></i>复制</a
      >

      <!-- TEMPORARY: 临时注释 -->
      <!-- {{# if(d.id !== 0) { }} -->
      <a lay-event="edit" class="mr-1"
        ><i class="pear-icon pear-icon-edit"></i>编辑</a
      >
      <a lay-event="del"><i class="pear-icon pear-icon-ashbin"></i>删除</a>
      <!-- {{# } }} -->
    </script>

    <!-- 推广链接设置 -->
    <div class="promotion-link-setting-wrapper" style="display: none">
      <div class="flex align-center remark">
        <label for="remark" class="mr-2">备注:</label>
        <input
          id="remark"
          type="text"
          name="remark"
          placeholder="请输入备注"
          autocomplete="off"
          class="layui-input"
        />
      </div>
      <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title" id="promotion-tab">
          <!--  example <li class="layui-this">一区</li> -->
        </ul>
        <div
          class="layui-tab-content"
          id="promotion-tab-contact"
          style="height: 30px"
        >
          <!-- <div class="layui-tab-item layui-show"></div> -->
        </div>
      </div>
    </div>

    <!-- 设置我的联系方式 -->
    <div class="set-my-contact" style="display: none">
      <form class="layui-form">
        <div class="layui-form-item">
          <div class="layui-form-label">QQ:</div>
          <div class="layui-input-block">
            <input type="text" class="layui-input" />
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-form-label">微信:</div>
          <div class="layui-input-block">
            <input type="text" class="layui-input" />
          </div>
        </div>
      </form>
    </div>

    <script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
    <script src="/app/admin/component/pear/pear.js"></script>
    <script src="/app/admin/admin/js/common.js"></script>
    <script src="/app/admin/admin/js/userindex.js"></script>
    <script>
      // 我的价格 常量数据
      let myPriceTables = [] // 通过接口获取我的价格列表

      layui.use(['layer', 'echarts', 'element', 'count'], function () {
        var $ = layui.jquery,
          layer = layui.layer,
          element = layui.element,
          count = layui.count,
          echarts = layui.echarts,
          table = layui.table

        // #my-price-tables 我的价格

        const renderMyPriceTable = () => {
          table.render({
            elem: '#my-price-tables',
            data: myPriceTables,
            page: false,
            cols: CustomMyPicre().cols,
            skin: 'line',
            toolbar: false,
          })
        }

        $('#see-price').on('click', function () {
          layer.open({
            type: 1,
            title: '我的价格',
            area : [ isMobile() ? "100%":"60%", isMobile() ? "100%":"95%"],
            content: $('.my-price'),
            success: function (layero, index) {
              renderMyPriceTable()
            },
          })
        })

        // 自定义链接价格
        const customLinkPrice = CustomLinkPrice()

        // 渲染推广链接Tables
        const renderPromotionLinkTables = () => {
          table.render({
            elem: '#promotion-link-tables',
            url: '/app/admin/v1-api/getLinkList',
            height: 320,
            page: false,
            cols: customLinkPrice.getCols(),
            skin: 'line',
            toolbar: false,
          })
        }

        $('#custom-price').on('click', function () {
          layer.open({
            type: 1,
            title: '推广链接',
            area : [ isMobile() ? "100%":"60%", isMobile() ? "100%":"95%"],
            content: $('.my-promotion-link'),
            btn: ['关闭'],
            yes: function (index, layero) {
              layer.close(index)
            },
            success: function (layero, index) {
              renderPromotionLinkTables()
            },
          })
        })

        /**
         * 删除行数据（推广链接)
         */
        function handleDeleteRow(data) {
          layer.confirm('确认删除, 是否继续?', function (index) {
            customLinkPrice.removeLink(data.id, function () {
              table.reload('promotion-link-tables', {}, true)
              layer.close(index)
            })
          })
        }

        /**
         * @param {object} data 存在既是编辑;
         */
        function handleEditRow(data = null) {
          // 更新 Tab 头部展示
          customLinkPrice.renderTabHeader(myPriceTables)
          customLinkPrice.renderRemark(data ? data.remark : undefined)
          customLinkPrice.renderTabContact(
            myPriceTables,
            data ? data.linkextend : undefined,
            data ? data.id : undefined
          )

          // promotion-link-setting-wrapper
          layer.open({
            type: 1,
            title: '推广设置',
            area : [ isMobile() ? "100%":"60%", isMobile() ? "100%":"95%"],
            content: $('.promotion-link-setting-wrapper'),
            btnAlign: 'c',
            btn: ['确定', '取消'],
            yes: function (index, layero) {
              // 保存 OR 更新
              customLinkPrice.saveCurrentForm(function () {
                layer.close(index)
                table.reload('promotion-link-tables', {}, true)
              })
            },
            btn2: function (index, layero) {
              layer.close(index)
            },
            success: function (layero, index) {
              renderPromotionLinkTables()
            },
          })
        }

        table.on('tool(promotion-link-tables)', function (objs) {
          const data = objs.data
          const layEvent = objs.event

          switch (layEvent) {
            case 'copy':
              copyText(data.link)
              break
            case 'edit':
              handleEditRow(data)
              break
            case 'del':
              handleDeleteRow(data)
              break
            default:
              layer.msg('类型错误', {})
          }
        })

        $('.my-promotion-link__operation button').click(function () {
          handleEditRow()
        })

        // ====== 公告 [START] ======
        initializationNotifyContect()
        // ====== 公告 [END] ======

        // Index. rendex info start
        initializationIndexInfo()
        // Index. rendex info end

        $('#edit-contact').on('click', function () {
          const qqVal = $('.my-qq-number').text()
          if (qqVal && qqVal !== '无')
            $($('.set-my-contact').find('form input:eq(0)')[0]).val(qqVal)

          const wxVal = $('.my-wx-number').text()
          if (wxVal && wxVal !== '无')
            $($('.set-my-contact').find('form input:eq(1)')[0]).val(wxVal)

          layer.open({
            type: 1,
            title: '我的联系方式',
            shade: 0.1,
            area : [ isMobile() ? "100%":"60%", isMobile() ? "100%":"60%"],
            btnAlign: 'c',
            btn: ['确定', '取消'],
            content: $('.set-my-contact'),
            yes: function (index, layero) {
              layer.confirm('确认保存, 是否继续?', function (xindex) {
                updateMyContact((objs) => {
                  const { qq, wx } = objs
                  $('.my-qq-number').text(qq)
                  $('.my-wx-number').text(wx)
                  layer.closeAll()
                })
              })
            },
            btn2: function (index, layero) {
              layer.close(index)
            },
          })
        })
      })
    </script>
  </body>
</html>
